<template>
  <div>
    <!-- <linechart pageId="accounting-board" /> -->
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="control-section">
        <div style="text-align:left;margin-bottom:14px;">
          <el-button type="primary"
                     size="small"
                     @click="openDialogWithTBG(null)">Map to</el-button>
          <!-- <el-button type="primary"
                    size="small">Auto Mapping</el-button>
          <el-button type="primary"
                    size="small">Mapping rules</el-button> -->
        </div>
        <div class="col-md-9 control-section"
             v-loading="loading">
          <ejs-treegrid :dataSource="data"
                        :allowSorting="true"
                        :allowResizing="true"
                        :allowReordering="true"
                        :allowFiltering="true"
                        :filterSettings="filterSettings"
                        childMapping="subList"
                        :treeColumnIndex="1"
                        :searchSettings='searchSettings'
                        :toolbar='toolbar'
                        :height="height"
                        :editSettings="editSettings"
                        :actionBegin="actionBegin"
                        ref="grid">
            <e-columns>
              <e-column type='checkbox'
                        width='30'></e-column>
              <e-column field="accountNumber"
                        :headerText="$t('custom.accounting.accountnumber')"
                        width="190"
                        textAlign="Right"
                        isPrimaryKey="true"
                        :validationRules="requiredRules"></e-column>
              <e-column field="isActive"
                        :headerText="$t('custom.accounting.isactive')"
                        width="180"
                        :validationRules="requiredRules"></e-column>
              <e-column field="accountType"
                        :headerText="$t('custom.accounting.accounttype')"
                        width="180"
                        :validationRules="requiredRules"></e-column>
              <e-column field="name"
                        :headerText="$t('custom.accounting.name')"
                        width="190"
                        :validationRules="requiredRules"></e-column>
              <e-column field="accountDesc"
                        :headerText="$t('custom.accounting.description')"
                        width="190"
                        :validationRules="requiredRules"></e-column>
              <e-column field='taapValue'
                        :headerText="$t('custom.accounting.tbgcoa')"
                        width="190"
                        textAlign="Right"
                        :dataSource='sportsData'
                        placeholder='waterMark'>
              </e-column>
              <e-column :headerText="$t('custom.accounting.modifyTbgcoa')"
                        width='140'
                        :commands='commands'></e-column>
            </e-columns>
          </ejs-treegrid>
        </div>
        <div v-if="false"
             style="margin:10px;">
          <el-form :model="dataForm"
                   :rules="dataRule"
                   ref="dataForm"
                   label-width="120px">
            <el-form-item prop="servicestaff"
                          :label="$t('custom.accounting.servicestaff')">
              <el-input v-model="dataForm.servicestaff"
                        style="width:510px;"
                        :placeholder="$t('custom.accounting.interservicestaff')"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         style="width:100px;"
                         size="small"
                         @click="submitServicestaff">{{ $t('confirm') }}</el-button>
            </el-form-item>
          </el-form>

        </div>
        <TbgCoaTemplate ref="tbg-coa-dialog"
                        @updateAccountingList="getAccountingData" />
      </div>
    </el-card>
  </div>
</template>

<script>

import { isNumber } from '@/utils/validate'
// import AccountingListFormat from '@/components/grid-format/AccountingListFormat.vue'
import TbgCoaTemplate from './template/tbgCoaTemplate'
// import Vue from 'vue'
export default {
  components: { TbgCoaTemplate },
  data () {
    return {
      sportsData: [
        'Badminton',
        'Basketball',
        'Cricket',
        'Football',
        'Golf',
        'Gymnastics',
        'Hockey',
        'Rugby',
        'Snooker',
        'Tennis'
      ],
      data: [],
      dataListSelections: [],
      loading: false,
      height: window.innerHeight - 300,
      toolbar: ['Search'],
      searchSettings: { hierarchyMode: 'Both' },
      filterSettings: { type: 'Menu', hierarchyMode: 'Parent' },
      requiredRules: { required: true },
      editSettings: {
        allowDeleting: false,
        allowEditing: true,
        allowAdding: false,
        mode: 'Cell'
      },
      progressrules: { date: true },
      accountingFields: {
        value: 'taap'
      },
      accountingListData: null,
      selectedAccounting: null,
      dataForm: {
        servicestaff: null
      },
      commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } }]
    }
  },

  created () {
    this.getAccountingData()
  },
  computed: {
    dataRule () {
      var validateNumber = (rule, value, callback) => {
        if (!isNumber(value)) {
          return callback(new Error(this.$t('tenant.validate.number')))
        }
        callback()
      }
      return {
        servicestaff: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    dataListSelectionChangeHandle () {
      this.dataListSelections = this.$refs.grid.getSelectedRecords()
    },
    openDialogWithTBG (e) {
      var elist = []
      if (!e) {
        elist = this.$refs.grid.getSelectedRecords()
      } else {
        elist.push(e)
      }
      if (elist.length > 0) {
        this.$refs['tbg-coa-dialog'].openDialog(elist)
      } else {
        this.$message.error(this.$t('custom.tips.selectItem'))
      }
    },
    submitServicestaff () {

    },
    actionBegin (e) {
      if (e.type === 'save' && e.columnName === 'taapValue') {
        const params = e.rowData
        this.$interface.accounting.updateAccountingTaap(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            return this.$message.success(res.msg)
          })
      }
      if (e.type === 'actionBegin' && e.requestType === 'beginEdit') {
        const data = e.rowData
        this.openDialogWithTBG(data)
      }
    },
    getAccountingData () {
      this.loading = true
      const params = {
        tenantCode: this.$store.state.user.tenantCode
      }
      this.$interface.accounting
        .getAccountingData(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.data = res.data
          this.loading = false
        })
    },
    onchange (e) {
      this.$emit('resetSearch', e.itemData.id)
    }
  }
}
</script>
